<template>
  <header>
    <div class="banxin tanxin header_in">
      <section>欢迎来到叩丁狼积分商城</section>
      <ul>
        <li class="avatar_li">
          <img width="26" class="avatar" :src="userInfo.headImg" alt="" />
          用户名 ：{{userInfo.nickName}}
        </li>
        <li>我的积分：{{userInfo.coin}}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="header_btn cart_btn" v-if="isLogin">
          <img  src="../assets/images/Shopping.png" alt="" />
          <span>购物车</span>
          <b>{{cartTotal}}</b>
        </li>
        <li class="header_btn login_btn" @click="goLogin" v-else>登录</li>
        <li class="header_btn login_btn" @click="jiebangFn">微信解绑</li>
      </ul>
    </div>
  </header>
</template>

<script>
import { UserInfoApi, WeixinLoginApi, UnBindWechatApi } from '@/request/api'

export default {
  data() {
    return {
        isLogin: false, // 是否登录，默认false未登录
        // 有户信息
        userInfo: {
          // 头像
          headImg: require("../assets/images/userImg.png"),
          // 用户名
          nickName: "游客",
          // 积分(鸡腿数)
          coin: "--",
        },
        // 购物车的数量
        cartTotal: 0,
    };
  },
  methods: {
    goLogin() {
      // 需要改变登录框的 v-show 的状态
      // 触发mutations 去打开 login
      this.$store.commit('changeLoginShow',true);
    },
    // 解绑微信
    jiebangFn() {
      UnBindWechatApi().then( res => {
        console.log(res);
      })
    },
    // goUser() {
    //   this.$store.dispatch("AsyncToast",{content: "请先登录", icon: "success"})
    // }
  },
  watch: {
    "$route.query.code":{
      handler(newVal,oldVal){
        if(newVal !== oldVal){
          // 调用绑定微信的函数
          this.bindWecahtFn();
        }
      }
    }
  },
  created() {
    // console.log(this.$route.query.code);
    let code = this.$route.query.code;
    // 如果地址栏有code 才去做微信登录的接口请求
    if(code) {
       WeixinLoginApi({ code }).then( res => {
        if(res.data.code === 0){
          // 登录成功
          let obj = {
            content: "登录成功", 
            icon: "success",
          };
          this.$store.dispatch("AsyncToast", obj);
          // 存储token
          localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
          // 更新header组件
          this.$store.commit('updateKeyFn')
          // 删除地址栏的code
          this.$router.push(this.$route.path)
        }
        else if(res.data.code === 400){
          // 重新扫码
          let obj = {
            content: "页面过期，请重新扫码二维码",
            icon: "danger",
          };
          this.$store.dispatch("AsyncToast", obj);
          // 重新打开登录框
          this.$store.commit('changeLoginShow', true)
        }
        else if(res.data.code === 407){
          // 需要手机验证码登录
          let obj = {
            content : "请使用手机号登录来绑定微信",
            icon: "danger",
          }
          this.$store.dispatch("AsyncToast", obj)
          // 重新打开登录框
          this.$store.commit('changeLoginShow', true)
          // 临时存储下uuid
          sessionStorage.setItem('uuid',res.data.uuid)
        }else{
          // 报错
        }
      });
    }
    // 获取用信息
    UserInfoApi().then( res => {
      // console.log(res.data.data);
      if(res.data.code === 0){
        let { cartTotal, userInfo } = res.data.data
        console.log(userInfo);
        this.cartTotal = cartTotal;
        this.userInfo = userInfo;
        this.isLogin = true;
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

header {
  background: @black;
  height: 40px;
  color: #fffefe;
  font-size: 14px;
  .header_in {
    align-items: center;
    height: 40px;
    ul {
      display: flex;
      height: 40px;
      align-items: center;
      li {
        cursor: pointer;
        margin-right: 20px;
        &.avatar_li {
          height: 26px;
          display: flex;
          align-items: center;
          .avatar {

            border-radius: 50%;
            padding: 5px;
          }
        }
        &.header_btn {
            width: 124px;
            height: 40px;
            background: @blue;
            cursor: pointer;
        }
        &.login_btn {
            text-align: center;
            line-height: 40px;
        }
        &.cart_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                margin-left: 8px;
                margin-right: 6px;
            }
            b {
                width: 22px;
                height: 22px;
                background: @orange;
                border-radius: 50%;
                text-align: center;
                line-height: 22px;
            }
        }
      }
    }
  }
}
</style>